<!DOCTYPE html>
<html lang="en">
#parse('base/head.html')
<body class="no-skin">

<div class="main-container ace-save-state" id="main-container">

    <div class="fp-framework main-content padding-12-20">
        <div class="main-content-inner">
            <div class="page-content">
				<div class="hidden" >
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-villageId" placeholder="villageId" value="$!{villageId}" />
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-townId" placeholder="townId" value="$!{townId}" />
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-qryType" placeholder="qryType" value="$!{qryType}" />
				</div>
				<div class="hidden" >
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-currentYear" placeholder="currentYear" value="$!{currentYear}" />
				</div>
                <div class="row">
                    
                    <div class="col-sm-12">
						<div class="row col-md-12 fp-toolbar fpxmList" >
							<button type="button" class="btn btn-sm btn-primary pull-left hidden" ><span class="ace-icon fa fa-plus icon-on-right"></span>新增</button>
							<select class=" PAP_choice" name="vtime" id="form-select-vtime" data-placeholder="年度">
								<option value="2014">2014</option>
								<option value="2015">2015</option>
								<option value="2016">2016</option>
								<option value="2017">2017</option>
								<option value="2018">2018</option>
								<option value="2019">2019</option>
								<option value="2020">2020</option>
								<option value="2021">2021</option>
								<option value="2022">2022</option>
								<option value="2023">2023</option>
								<option value="2024">2024</option>
								<option value="2025">2025</option>
								<option value="2026">2026</option>
								<option value="2027">2027</option>
								<option value="2028">2028</option>
								<option value="2029">2029</option>
								<option value="2030">2030</option>
							</select>
							<select class="chosen-select form-control" id="form-field-project-type" data-placeholder="项目分类">
								<option value="">全部</option>
								#foreach($projectTypePO in $projectTypeList)
								<option value="$!{projectTypePO.dataKey}">$!{projectTypePO.dataName}</option>
								#end
							</select>
							<div class="input-group" >
								<input type="text" class="form-control search-query" id="form-field-project-name" placeholder="项目名称" >
								<span class="input-group-btn">
									<button type="button" id="projectSearchBtn" class="btn btn-primary btn-sm"><span class="ace-icon fa fa-search icon-on-right bigger-110"></span>查询</button>
								</span>
							</div>
						</div>






                        <!--
						<div class="row fpxmList">
                            <div class="form-group">
                                <label class="col-sm-1 control-label no-padding-right" for="form-project-name">项目名称</label>
                                <div class="col-sm-1">
                                    <input data-rel="tooltip" type="text" id="form-project-name" placeholder="项目名称" title="" data-placement="bottom" data-original-title="Hello Tooltip!">
                                </div>
                                <div style="float: right" class="col-sm-1">
                                    <button class="btn btn-info" id="projectSearchBtn" type="button">
                                        查询
                                    </button>
                                </div>
                            </div>
                        </div>
						-->
                        <div class="row">
                            <div class="col-sm-12 FPXM-overflow-table" style="overflow-x:auto">
                                <table id="fpxm-project-list"></table>
                                <div id="fpxm-project-list-pager"></div>
                            </div>
                        </div>
						
						
												
                    </div>
					
					<div class="col-sm-12">
						<!-- 模态框（Modal） -->
						<div class="modal fade bs-example-modal-lg" id="projectDetailModal" tabindex="-1" role="dialog" data-backdrop="true" data-keyboard="false" aria-labelledby="pro_detail_title_id" aria-hidden="true">
							<div class="modal-dialog modal-lg" >
								
								<div class="modal-content" style="height: 600px;overflow: auto;">
									<div class="modal-header hide">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
										</button>
									</div>
									<div class="modal-body center " style="overflow: auto;">
										<div style="clear:both"></div>
										<div style="height:400px;">
											<div class="fp-loading">
											 <i class="fa fa-spinner fa-pulse fa-3x"></i>
											 <p>数据加载中，请耐心等待</p>
											</div>
										</div>
									</div>
									<div class="modal-footer hide">
										
									</div>
								</div><!-- /.modal-content -->
							</div><!-- /.modal -->
						</div>
					</div>
					
					<div class="col-sm-12">
						<!-- 模态框（Modal） -->
						<div class="modal fade bs-example-modal-lg" id="projectFamilyModal" tabindex="-1" role="dialog" data-backdrop="true" data-keyboard="false" aria-labelledby="pro_detail_title_id1" aria-hidden="true">
							<div class="modal-dialog modal-lg" >
								
								<div class="modal-content" style="height: 600px;overflow: auto;">
									<div class="modal-header hide">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
										</button>
									</div>
									<div class="modal-body center " style="overflow: auto;">
										<div style="clear:both"></div>
										<div style="height:400px;">
											<div class="fp-loading">
											 <i class="fa fa-spinner fa-pulse fa-3x"></i>
											 <p>数据加载中，请耐心等待</p>
											</div>
										</div>
									</div>
									<div class="modal-footer hide">
										
									</div>
								</div><!-- /.modal-content -->
							</div><!-- /.modal -->
						</div>
					</div>		
                <div/>
            </div>
        </div><!-- /.page-content -->
    </div>
</div>
#parse('base/footer.html')
<script>
    var projectType = '';
    jQuery(function ($) {
        menuActive(2);
        $("#projectSearchBtn").on('click',function () {
        	console.log("projectSearchBtn click");
        	reloadGridData();
        });

    });
</script>
<!-- 项目列表 -->
<script type="text/javascript">
    function reloadGridData() {
		console.log("reloadGridData...");
        jQuery("#fpxm-project-list").jqGrid('setGridParam',{
            datatype:'json',
			mtype : "POST",
            postData:{'projectName':$("#form-field-project-name").val(),
                'projectType':$("#form-field-project-type  option:selected").val(),
                'qryType':$("#form-field-qryType").val(),
                'townId':$("#form-field-townId").val(),
                'villageId':$("#form-field-villageId").val(),
                'vtime':$("#form-select-vtime option:selected").val()
			}, //发送数据
            page:1
        }).trigger("reloadGrid");
    }
	/**
	console.log($('#left-gov-tree', window.parent.document).height());
	console.log(window.document.documentElement.scrollHeight);
	console.log(window.parentWindow);
	console.log($(window).height()); //浏览器时下窗口可视区域高度
	console.log($(document).height()); //浏览器时下窗口文档的高度
	console.log($(document.body).height());//浏览器时下窗口文档body的高度
	console.log($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
	console.log($(window).width()); //浏览器时下窗口可视区域宽度
	console.log($(document).width());//浏览器时下窗口文档对于象宽度
	console.log($(document.body).width());//浏览器时下窗口文档body的高度
	console.log($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
	  
	console.log($(document).scrollTop()); //获取滚动条到顶部的垂直高度
	console.log($(document).scrollLeft()); //获取滚动条到左边的垂直宽度
	**/
	
	var parentBodyHeight = $('#left-gov-tree', window.parent.document).height()||800;
    //var pkh_parent_column = $("#fpxm-project-list").closest('[class*="col-"]').closest('h4');
    var widget_header = $(".fpxmList");
	    //resize to fit page size
    $(window).on('resize.jqGrid', function () {
        //$("#fpxm-project-list").jqGrid( 'setGridWidth', widget_header.width());
    });
    function detailClick_pro(projectId){
        //window.location.href = ("$!webPath/fpxm/detail?projectId="+projectId);
		//打开模态窗口
		//console.log("清空模态详情");
		$('#projectDetailModal').children().remove(); 
		//console.log("显示加载信息...");
		$('#projectDetailModal').append('<div class="modal-dialog modal-lg " ><div class="modal-content" style="height: 600px;overflow: auto;"><div class="modal-header hide"></div><div class="modal-body center " ><div style="clear:both"></div><div style="height:400px;"><div class="fp-loading"><i class="fa fa-spinner fa-pulse fa-3x"></i><p>数据加载中，请耐心等待</p></div></div></div><div class="modal-footer hide"></div></div></div>'); 
		//console.log("加载模态详情");
		$('#projectDetailModal').modal({keyboard:false,backdrop:true,remote:"$!webPath/fpxm/detail?projectId="+projectId});
    };
    function detailClick_profamily(projectId){
        //window.location.href = ("$!webPath/fpxm/detail?projectId="+projectId);
		//打开模态窗口
		//console.log("清空模态详情");
		$('#projectFamilyModal').children().remove(); 
		//console.log("显示加载信息...");
		$('#projectFamilyModal').append('<div class="modal-dialog modal-lg " ><div class="modal-content" style="height: 600px;overflow: auto;"><div class="modal-header hide"></div><div class="modal-body center " ><div style="clear:both"></div><div style="height:400px;"><div class="fp-loading"><i class="fa fa-spinner fa-pulse fa-3x"></i><p>数据加载中，请耐心等待</p></div></div></div><div class="modal-footer hide"></div></div></div>'); 
		//console.log("加载模态详情");
		$('#projectFamilyModal').modal({keyboard:false,backdrop:true,remote:"$!webPath/fpxm/familyRelated?projectId="+projectId});
    };
    
    
    //初始化模态窗口
    jQuery(function($) {
		//v2
		$("#projectDetailModal").on("hidden", function() {  
			$(this).removeData("modal");  
			console.log("projectDetailModal hidden ");
			
		});  
		//v3
		$("#projectDetailModal").on("hidden.bs.modal", function() {  
			$(this).removeData("bs.modal");
			/*modal页面加载$()错误,由于移除缓存时加载到<span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的数据，手动移除加载的内容*/
			$(this).find(".modal-content").children().remove(); 
			console.log("projectDetailModal hidden.bs.moda ");
			//$("#fpxm-project-list").jqGrid( 'setGridWidth', widget_header.width());
		}); 
		
		//v2
		$("#projectFamilyModal").on("hidden", function() {  
			$(this).removeData("modal");  
			console.log("projectFamilyModal hidden ");
			
		});  
		//v3
		$("#projectFamilyModal").on("hidden.bs.modal", function() {  
			$(this).removeData("bs.modal");
			/*modal页面加载$()错误,由于移除缓存时加载到<span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的数据，手动移除加载的内容*/
			$(this).find(".modal-content").children().remove(); 
			console.log("projectFamilyModal hidden.bs.moda ");
			//$("#fpxm-project-list").jqGrid( 'setGridWidth', widget_header.width());
		}); 
		
		
		
	});
	
    $("#fpxm-project-list").jqGrid({
        url : '$!webPath/fpxm/qryProjectByPage?villageId='+$("#form-field-villageId").val()+"&townId="+$("#form-field-townId").val(),
        datatype : "json",
		mtype : "POST",
        height : parentBodyHeight-160,
        autowidth: widget_header.width()-24,
        colNames : [  '项目编号','项目分类','项目名称','金额','开始日期','截止日期','部门领导','责任部门','项目责任人','扶贫办责任人','操作'],
        colModel : [
            //{name : 'xh',index : 'xh',width : 50},
            {name : 'projectCode',index : 'projectCode',width: '88px',sortable : false},
            {name : 'projectTypeName',index : 'projectTypeName',width: '75px',sortable : false},
            {name : 'projectName',index : 'projectName',width: '250px',sortable : false},
            {name : 'projectTotalInvest',index : 'projectTotalInvest',width: '55px',sortable : false},
            {name : 'projectBeginDate',index : 'projectBeginDate',width: '82px',sortable : false,
				formatter: function (cellvalue, options, rowObject) {
						return cellvalue.slice(0,10);
				}
			},
            {name : 'projectEndDate',index : 'projectEndDate',width: '82px',sortable : false,
				formatter: function (cellvalue, options, rowObject) {
						return cellvalue.slice(0,10);
				}
			},
			{name : 'projectCityLeader',index : 'cityLeader',width: '80px',sortable : false},
			{name : 'projectDepartment',index : 'projectDepartment',width: '90px',sortable : false},
			{name : 'respStaff',index : 'respStaff',width: '95px',sortable : false},
			{name : 'projectPovertyLeader',index : 'projectPovertyLeader',width: '110px',sortable : false},
            {name : 'myac',index : '', fixed:true,width: '80px', sortable:false, resize:false,
//								formatter:'actions',
                formatter: function (cellvalue, options, rowObject) {
                    var detail='<div style="cursor: pointer;">';
                    detail += '<i class="normal-icon ace-icon block-inherit blue " onclick="detailClick_pro(' + rowObject.projectId +')">详细</i>';
                    detail += '<i class="normal-icon ace-icon block-inherit blue " onclick="detailClick_profamily(' + rowObject.projectId +')">受惠贫困户</i>';
                    detail += '</div>';
                    return detail;
                }

            }
        ],
        postData:{'projectName':$("#form-field-project-name").val(),
            'projectType':$("#form-field-project-type  option:selected").val(),
            'qryType':$("#form-field-qryType").val(),
            'townId':$("#form-field-townId").val(),
            'villageId':$("#form-field-villageId").val(),
            'vtime':$("#form-select-vtime option:selected").val()
		}, //发送数据
        jsonReader : {
            root : "resultList",
            page : "page",
            total : "totalPages",
            records : "totalRecords",
            rows : "resultList"
        },
        rowNum:10,
        rowList:[10,20,30],
        pager: '#fpxm-project-list-pager',
        viewrecords : true,
        loadComplete : function() {
			var table = this;
			setTimeout(function(){
				styleCheckbox(table);
				
				updateActionIcons(table);
				updatePagerIcons(table);
				enableTooltips(table);
			}, 0);

			$(table).siblings(".norecords").remove(); 
			var rowNum = parseInt($(table).getGridParam("records"), 10);   
			if (rowNum <= 0) {   
				$(table).parent().append("<div  class=\"norecords\">没有数据...</div>");
				$(table).siblings(".norecords").show(); 								
			} 
        },

        multiselect : false
    });

    $("#fpxm-project-list").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
</script>
<script>
    jQuery(function ($) {
    	//设置下拉框
    	var currentYear = $("#form-field-currentYear").val();
    	$("#form-select-vtime").find("option[value='"+currentYear+"']").attr("selected",true);
    	
    });
</script>
    
</body>
</html>
